<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距-padding</title>
		<style>
			.wrap {
				margin: 100px auto;
				width: 600px;
				height: 300px;
				box-sizing: border-box;
				border: 20px solid #000000;
				background-color: #CCCCCC;
				padding: 20px;
				/* background-clip:content-box; */
				}
			h1 {
				margin: 0;
			}
			span {
				font-size: 30px;
				padding: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 内边距-padding  
				padding:30px   上下左右全是30px
				padding:20px 30px  第一个值是上下  第二值是左右
				padding:20px 30px 40px  第一个上  第二值 左右  第三个值是下
				padding:20px 30px 40px 50px
				padding:
				padding-top:30px
				padding-bottom:30px
				padding-left:30px
				padding-right:30px
				background-clip:border-box(默认值)  /padding-box / content-box;
		    1、添加内边距会把实际的高度宽度撑大
			2、不能有负值
			3、默认的情况下，margin 透明的 padding border 都是背景色覆盖的范围
			4、行内元素原则上不设置内边距，上下内边距不会生效
		 
		 
		 盒模型 
		 
		 W3C盒模型 也叫标准盒模型    实际的元素宽、高度 = content（width） + padding + border 
		 IE 盒模型 也叫怪异盒模型    实际的元素宽、高度 = content （width）
		 
		 标准盒模型可以与ie盒模型相互转换  box-sizing:content-box(标准的盒模型)    、/border-box (ie的盒模型)
		 
		 -->
		 <div class="wrap">
			 <span>美国加油！！！</span>
			 <span>美国加油！！！</span>
		 </div>
	</body>
</html>
